/**
 * 在指定id的元素左上角添加复制按钮
 * id 元素id
 */
function addCopyButton(id) {
  var codeBlocks = document.querySelectorAll("#" + id);
  codeBlocks.forEach(function (codeBlock) {
    // 创建包裹代码块和按钮的容器元素
    var container = document.createElement("div");
    container.className = "code-container";

    // 创建复制按钮
    var copyButton = document.createElement("text");
    copyButton.className = "copy";
    copyButton.textContent = "复制";

    // 设置复制按钮样式
    copyButton.style.position = "absolute";
    copyButton.style.top = "17px";
    copyButton.style.left = "-56px";
    copyButton.style.color = "white";
    copyButton.style.backgroundColor = "#98c379";
    copyButton.style.fontSize = "22px";
    copyButton.style.border = "none";
    copyButton.style.borderRadius = "4px";
    copyButton.style.zIndex = 1;
    copyButton.style.padding = "2px 4px";

    copyButton.addEventListener("click", function () {
      // 获取代码块的文本内容
      var code = codeBlock.textContent;

      // 创建一个临时的textarea元素，并将代码块的内容设置为其值
      var textarea = document.createElement("textarea");
      textarea.value = code.trim(); // trim去除前后空格

      // 将textarea元素追加到body中
      document.body.appendChild(textarea);

      // 选中textarea中的文本
      textarea.select();

      // 执行复制操作
      document.execCommand("copy");

      // 移除临时的textarea元素
      document.body.removeChild(textarea);

      // 修改复制按钮文本为“已复制”
      //this.textContent = "已复制";
      showMsg("success", "复制成功!");
    });

    // 将按钮添加到容器元素内
    container.appendChild(copyButton);

    // 将容器元素插入到代码块之前
    codeBlock.parentNode.insertBefore(container, codeBlock);

    // 设置容器元素样式，使其定位为相对定位（position: relative）
    container.style.position = "relative";
  });
}

/**
 * 弹出提示消息
 * type     消息类型
 * messsage 消息文本
 */
function showMsg(type, message) {
  var popup = document.getElementById("popup");
  popup.textContent = message; // 设置错误信息
  popup.style.display = "block"; // 显示弹出框
  popup.style.fontSize = "14px";
  // 设置颜色
  if (type === "success") {
    popup.style.color = "white";
    popup.style.backgroundColor = "#98c379";
  }
  setTimeout(function () {
    popup.style.display = "none"; // 0.8秒后自动隐藏
  }, 800);
}

function loadData(id) {
	console.log('loadData.....');
	console.log(dataJson);
	var dataList = JSON.parse(JSON.stringify(dataJson));
	var list = document.getElementById(id);
	dataList.forEach(function(data) {
		// 创建代码块容器元素
		var item = document.createElement("div");
		item.className = 'item';
		// 标题
		var title = document.createElement("div");
		title.id = 'title';
		title.textContent = data.title;
		title.style.fontSize = "16px";
		// 内容
		var content = document.createElement("div");
		content.id = 'content';
		// 内容代码块
		var pre = document.createElement("pre");
		var code = document.createElement("code");
		code.textContent = data.code;
		code.style.padding = "0px 10px";
		code.style.fontSize = "26px";
		// 组装页面元素
		item.appendChild(title);
		pre.appendChild(code);
		content.appendChild(pre);
		item.appendChild(content);
		list.appendChild(item);
	});
	
}